<template>
 <view class="" style="padding-bottom: 100rpx;">
    <view class="w-full">
      <image class="w-full" :src="goodsInfo.cover_url" mode="aspectFit"></image>
    </view>
    <view class="px32">
      <view class="title">{{goodsInfo.title}}</view>
      <view class="sub-title">{{goodsInfo.description}}</view>
      <view class="desc flex justify-between p32">
        <view class="price">￥{{goodsInfo.price}}</view>
        <view class="sales">销量 {{goodsInfo.sales}}</view>
      </view>
    </view>

    <u-tabs sticky :list="sortList" @click="clickSort" lineColor="#d81e06" inactiveStyle="#000" lineWidth="32" itemStyle="line-height: 44px;font-weight: bold;"></u-tabs>

    <view class="p32">
      <view class="goods-details" v-if="current == 0">
        <rich-text :nodes="goodsInfo.details"></rich-text>
      </view>
      <view v-if="current == 1">
        <view class="comment" v-for="(res, index) in commentList" :key="res.id">
          <view class="left"><image :src="res.user.avatar_url" mode="aspectFill"></image></view>
          <view class="right">
            <view class="top">
              <view class="name">{{ res.user.name }}</view>
              <view class="like" :class="{ highlight: res.isLike }">
                <view class="num">{{ res.likeNum }}</view>
                <u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
                <u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
              </view>
            </view>
            <view class="content">{{ res.content }}</view>
            <view class="reply-box">
              <view class="item" v-for="(item, index) in res.replyList" :key="item.index">
                <view class="username">{{ item.name }}</view>
                <view class="text">{{ item.contentStr }}</view>
              </view>
              <view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
                共{{ res.allReply }}条回复
                <u-icon class="more" name="arrow-right" :size="26"></u-icon>
              </view>
            </view>
            <view class="bottom">
              {{ res.created_at }}
              <view class="reply">回复</view>
            </view>
          </view>
        </view>
      </view>
      
      <view v-if="current == 2">
        <u-row customStyle="margin-bottom: 20px;flex-wrap: wrap;" v-show="goodsList.length">
          <u-col span="6" v-for="good in goodsList" :key="good.id">
            <good-card :good="good"></good-card>
          </u-col>
        </u-row>
      </view>
    </view>

    <view class="navigation flex bg-white px32">
      <view class="left flex flex-1 text-center">
        <navigator class="item flex-1" url="/pages/index/index" open-type="switchTab">
          <u-icon name="home" :size="28"></u-icon>
          <view class="text u-line-1">首页</view>
        </navigator>
        <view class="item flex-1" @click="collect" :class="[ goodsInfo.is_collect === 2 ? 'collect':'']">
          <block v-if="!isCollect">
            <u-icon name="star" :size="28"></u-icon>
            <view class="">收藏</view>
          </block>
          <block v-else>
            <u-icon name="star-fill" :size="28" color="red"></u-icon>
            <view class="collect">已收藏</view>
          </block>
        </view>
        <view class="item car flex-1" @click="toCarts">
          <u-badge class="car-num" :value="cartsCount" type="error" :offset="[-3, -6]"></u-badge>
          <u-icon name="shopping-cart" :size="32" :color="$u.color['contentColor']"></u-icon>
          <view class="text u-line-1">购物车</view>
        </view>
      </view>
      <view class="right flex flex-1 items-center">
        <view class="btn-primary cart btn u-line-1 flex-1 text-center mr12" @click="addCarts">加入购物车</view>
        <view class="btn-primary buy btn u-line-1 flex-1 text-center">立即购买</view>
      </view>
    </view>
 </view>
</template>

<script>
import { goodsDetail, goodsCollect, cartsAdd, cartsList } from '@/config/api'
export default {
  data() {
   return {
    current: 0,
    sortList: [
      {
        name: '详情'
      }, 
      {
        name: '评论',
        badge: {
          value: 0
        }
      }, {
        name: '推荐'
      }
    ],
    goodsInfo: {},
    goodsId: null,
    commentList: [],
    goodsList: [],
    isCollect: 0,
    cartsCount: 0
   }
  },
  onLoad(option) {
    this.goodsId = option.id
    this.getData() // 商品数据
    this.getCartsCount() // 购物车数量
  },
  methods: {
    async getData() {
      const res = await goodsDetail(this.goodsId)
      this.goodsInfo = res.goods
      this.commentList = res.goods.comments
      if(this.commentList.length) {
        this.sortList[1].badge.value = this.commentList.length
      }
      this.isCollect = this.goodsInfo.is_collect
      this.goodsList = res.like_goods

      this.goodsInfo.details = this.goodsInfo.details.replace(/\<img/gi, '<img style="max-width:100%"')
    },
    clickSort(item) {
      if(this.current !== item.index) {
        this.current = item.index
      }
    },
    // 跳转到全部回复
		toAllReply() {
			// uni.navigateTo({
			// 	url: './reply'
			// });
		},
    // 点赞
		getLike(index) {
			this.commentList[index].isLike = !this.commentList[index].isLike;
			if (this.commentList[index].isLike == true) {
				this.commentList[index].likeNum++;
			} else {
				this.commentList[index].likeNum--;
			}
		},
    /**
     * 收藏商品
     */
    async collect() {
      // 请求收藏API
      const res = await goodsCollect(this.goodsId)
      // 收藏成功之后，提示消息，并改变按钮状态
      if(this.isCollect === 0) {
        this.$u.toast('收藏成功')
        this.isCollect = 1
      } else {
        this.$u.toast('取消收藏')
        this.isCollect = 0
      }
    },
    /**
     * 加入购物车
     */
    async addCarts() {
      // 请求收藏API
      const params = {
        goods_id: this.goodsId
      }
      try {
        const res = await cartsAdd(params)
        // 提示消息
        this.$u.toast('添加成功')
        // 重新获取购物车数据
        this.getCartsCount()

      } catch(error) {
        this.$u.toast('添加失败')
      }
    },
    /**
     * 获取购物车数量
     */
    async getCartsCount() {
      const token = this.vuex_token
      if(token) {
        const res = await cartsList()
        this.cartsCount = res.data.length
      }
    },
    /**
     * 跳转到购物车
     */
    async toCarts() {
      if(this.$u.utils.isLogin()) {
        this.$u.route({
          type: 'switchTab',
          url: 'pages/carts/index'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.navigation {
 position: fixed;
 bottom: 0;
 width: 100%;
 box-sizing:border-box;
 height: 100rpx;
 border-top: 1px solid #ddd;
}

.title {
  font-size: 34rpx;
  font-weight: bold;
}
.price {
  font-weight: bold;
  font-size: 32rpx;
  color: #f00;
}

.goods-details {
  img {
    width: 100%!important;
    height: auto!important;
  }
}
.item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  .car-num {
    position: absolute;
    top: 5%;
    left: 56%;
    z-index: 1;
  }
}

.collect {
  color: #f00;
}

.cart {

}
.buy {

}

.comment {
	display: flex;
	padding: 30rpx;
	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}
	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			.name {
				color: #5677fc;
			}
			.like {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;
				.num {
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}
			.highlight {
				color: #5677fc;
				.num {
					color: #5677fc;
				}
			}
		}
		.content {
			margin-bottom: 10rpx;
		}
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			.item {
				padding: 20rpx;
				border-bottom: solid 2rpx $u-border-color;
				.username {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.all-reply {
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;
				.more {
					margin-left: 6rpx;
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
			.reply {
				color: #5677fc;
				margin-left: 10rpx;
			}
		}
	}
}
</style>